<template>
	<view class="my_box">

		<Nvagatsmy :images="images"></Nvagatsmy>
		<view class="my_tops">
			<!-- 新增的用户信息区域 -->
			<view class="zz">

			</view>
			<view class="user-info-container" v-if="showTitle">
				<!-- 头像区域 -->
				<view class="avatar-container" @click="showAvatarDialog = true">
					<image class="avatar" :src="'https://img.jingkakeji.com/img' + listsd.avatar" mode="widthFix"></image>
					<view class="avatar-mask">
						<image class="edit-icon" src="https://img.jingkakeji.com/img/static/edit-icon.png" mode="widthFix"></image>
					</view>

				</view>
				<!-- 信息区域 -->
				<view class="user-details">
					<view class="username-container">
						<text class="username">{{ listsd.name }}</text>
						<image class="edit-username-icon" src="https://img.jingkakeji.com/img/static/bianji.png" mode="widthFix"
							@click.stop="showEditNameDialog = true"></image>
					</view>
					<view class="invite-code">
						<text class="invite-label">邀请码：</text>
						<text class="invite-value value-one">{{ listsd.invite_code }}</text>
						<image class="copy-icon" src="https://img.jingkakeji.com/img/static/fuzhi.png" mode="widthFix" @click="copyInviteCode">
						</image>
					</view>
					<view class="invite-code">
						<text class="invite-label">ViP等级：</text>
						<text class="invite-value value-two">VIP{{ listsd.vip_level }}</text>
					</view>
				</view>
			</view>
			<view class="user-info-container" v-else>
				<!-- 头像区域 -->
				<view class="avatar-container">
				</view>
				<!-- 信息区域 -->
				<view class="user-details">
					<view class="username-container">
						<text class="username" @click="toLogin">点我登录</text>
						<image class="edit-username-icon" src="https://img.jingkakeji.com/img/static/bianji.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="my_center" @click="aaa">
			<image style="width: 100%;height: 100%;" src="https://img.jingkakeji.com/img/static/yaoqing.png" mode=""></image>
		</view>
		<view class="my_list">
			<view class="tabs_list" v-for="(item,index) in lists" :key="index" @click="onprops(index)">
				<div class="icon">
					<image style="width: 40rpx;height: 40rpx;" :src="'https://img.jingkakeji.com/img' + item.icons" mode=""></image>
				</div>
				<div class="text">{{item.title}}</div>
			</view>
			<i></i><i></i>
		</view>
		<view class="my_backs" @click="backlogin">
			退出登录
		</view>
		<view class="my_yonghus">
			《用户协议》
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center" bgColor="transparent">
			<view class="props">
				<view class="props_top">
					<image style="width: 130rpx;height: 55rpx;" src="https://img.jingkakeji.com/img/static/lujinthrees.png" mode=""></image>
				</view>
				<view class="props_back" @click="close">
					<image style="width: 40rpx;height: 40rpx;" src="https://img.jingkakeji.com/img/static/lujinthree.png" mode=""></image>
				</view>
				<view class="props_list">
					<view class="lists">
						<view class="lists_left">
							游戏音效
						</view>
						<view class="lists_right">
							<view class="on" :style="{ 
								backgroundImage: 'url(' + music + ')', 
								backgroundRepeat: 'no-repeat', 
								backgroundSize: 'contain' 
							}" @click="ons">
								<image style="width: 50rpx;height: 50rpx;" :src="music_on" mode=""></image>
							</view>
							<view class="off" :style="{ 
								backgroundImage: 'url(' + musictwo + ')', 
								backgroundRepeat: 'no-repeat', 
								backgroundSize: 'contain' 
							}" @click="offs">
								<image style="width: 50rpx;height: 50rpx;" :src="music_off" mode=""></image>
							</view>
						</view>
					</view>
					<view class="lists">
						<view class="lists_left">
							游戏音乐
						</view>
						<view class="lists_right">
							<view class="on" :style="{ 
								backgroundImage: 'url(' + music2 + ')', 
								backgroundRepeat: 'no-repeat', 
								backgroundSize: 'contain' 
							}" @click="onstwo">
								<image style="width: 50rpx;height: 50rpx;" :src="music_on2" mode=""></image>
							</view>
							<view class="off" :style="{ 
								backgroundImage: 'url(' + musictwo2 + ')', 
								backgroundRepeat: 'no-repeat', 
								backgroundSize: 'contain' 
							}" @click="offstwo">
								<image style="width: 50rpx;height: 50rpx;" :src="music_off2" mode=""></image>
							</view>
						</view>
					</view>
					<view class="props_btm" @click="close">
						确定
					</view>
				</view>

			</view>
		</u-popup>

		<!-- <更换头像弹窗 -->
		<u-popup :show="showAvatarDialog" @close="showAvatarDialog = false" mode="center" bgColor="rgba(0,0,0,0.7)">
			<view class="avatar-dialog">
				<view class="dialog-title">更换头像</view>
				<view class="dialog-btns">
					<view class="dialog-btn" @click="chooseImage('album')">从相册选择</view>
					<view class="dialog-btn" @click="chooseImage('camera')">拍照</view>
					<view class="dialog-btn cancel-btn" @click="showAvatarDialog = false">取消</view>
				</view>
			</view>
		</u-popup>

		<!-- 编辑用户名弹窗 -->
		<u-popup :show="showEditNameDialog" @close="showEditNameDialog = false" mode="center" bgColor="rgba(0,0,0,0.7)">
			<view class="edit-name-dialog">
				<view class="dialog-title">编辑用户名</view>
				<view class="input-container">
					<input type="text" v-model="newUsername" placeholder="请输入用户名" maxlength="10" />
				</view>
				<view class="dialog-btns">
					<view class="dialog-btn cancel-btn" @click="showEditNameDialog = false">取消</view>
					<view class="dialog-btn" @click="confirmEditName">确定</view>
				</view>
			</view>
		</u-popup>

		<change-phone-dialog :visible.sync="showModal" :mask-style="{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }"
			:container-style="{
			        backgroundColor: '#f8f8f8',
			        borderRadius: '20rpx',
			        boxShadow: '0 0 30rpx rgba(0,0,0,0.2)'
			      }" @success="handleSuccess" />
		<Tabbars></Tabbars>
	</view>

</template>

<script>
	import {
		getUsetInof,
		getImageBase64,
		getSet_avatar,
		getSet_name
	} from "../../api/outOfTheFree/index.js"
	import {
		pathToBase64,
		base64ToPath
	} from "../../js_sdk/mmmm-image-tools/index.js"
	import ChangePhoneDialog from "../../Component/change-phone-modal/change-phone-modal.vue"
	import Tabbars from "../../Component/Tabbars/Tabbars.vue"
	import Nvagatsmy from "../../Component/navgatsmy/navgatsmy.vue"
	import store from "../../store/index.js"
	export default {
		data() {
			return {
				music: uni.getStorageSync('gameSoundEnabled') !== false ? "https://img.jingkakeji.com/img/static/lujinq.png" : "",
				musictwo: uni.getStorageSync('gameSoundEnabled') === false ? "https://img.jingkakeji.com/img/static/lujinq.png" : "",
				music_on: "https://img.jingkakeji.com/img/static/ON(1).png",
				music_off: "https://img.jingkakeji.com/img/static/OFF(1).png",
				images: "https://img.jingkakeji.com/img/static/mys.png",
				music2: uni.getStorageSync('gameMusicEnabled') !== false ? "https://img.jingkakeji.com/img/static/lujinq.png" : "",
				musictwo2: uni.getStorageSync('gameMusicEnabled') === false ? "https://img.jingkakeji.com/img/static/lujinq.png" : "",
				music_on2: "https://img.jingkakeji.com/img/static/ON(1).png",
				music_off2: "https://img.jingkakeji.com/img/static/OFF(1).png",
				images2: "https://img.jingkakeji.com/img/static/mys.png",
				show: false,
				lists: [

					{
						icons: "https://img.jingkakeji.com/img/static/mysjl.png",
						title: "我的记录"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/gaoguang.png",
						title: "高光时刻"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/shimingcurd.png",
						title: "实名认证"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/steamsd.png",
						title: "Steam"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/phones.png",
						title: "手机号"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/shezhi.png",
						title: "设置"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/kefus.png",
						title: "在线客服"
					},

				],
				showModal: false,
				// 新增用户信息相关数据
				userAvatar: "https://img.jingkakeji.com/img/static/default-avatar.png",
				username: "用户名",
				inviteCode: "ABC123456",
				showAvatarDialog: false,
				showEditNameDialog: false,
				newUsername: "",
				listsd: [],
				showTitle: false
			}
		},
		components: {
			Tabbars,
			Nvagatsmy,
			ChangePhoneDialog
		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (token) {
				this.onusers()
				this.showTitle = true
			}
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: "/pages/Login/Login"
				})
			},
			backlogin() {
				store.commit("LOGIN_IS_SHOW", true)
				store.dispatch('removeInfo')
				uni.removeStorageSync('token')
				// 清除页面上的用户数据
				this.listsd = []
				this.showTitle = false
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			async onusers() {
				let res = await getUsetInof()
				this.listsd = res.data
				// console.log(res,"res")
			},
			// 名字修改接口
			async getSet_names(data) {
				let res = await getSet_name({
					name: data
				})
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					this.onusers()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					console.log(res.code)
				}
			},
			onstwo() {
				this.music2 = "https://img.jingkakeji.com/img/static/lujinq.png"
				this.musictwo2 = ""
				this.music_on2 = "https://img.jingkakeji.com/img/static/ON(1).png"
				this.music_off2 = "https://img.jingkakeji.com/img/static/OFF(1).png"
				// 保存游戏音乐开启状态到本地存储
				uni.setStorageSync('gameMusicEnabled', true)
			},
			offstwo() {
				this.music2 = ""
				this.musictwo2 = "https://img.jingkakeji.com/img/static/lujinq.png"
				this.music_on2 = ""
				this.music_off2 = "https://img.jingkakeji.com/img/static/OFF.png"
				// 保存游戏音乐关闭状态到本地存储
				uni.setStorageSync('gameMusicEnabled', false)
			},
			ons() {
				this.music = "https://img.jingkakeji.com/img/static/lujinq.png"
				this.musictwo = ""
				this.music_on = "https://img.jingkakeji.com/img/static/ON(1).png"
				this.music_off = "https://img.jingkakeji.com/img/static/OFF(1).png"
				// 保存游戏音效开启状态到本地存储
				uni.setStorageSync('gameSoundEnabled', true)
			},
			offs() {
				this.music = ""
				this.musictwo = "https://img.jingkakeji.com/img/static/lujinq.png"
				this.music_on = ""
				this.music_off = "https://img.jingkakeji.com/img/static/OFF.png"
				// 保存游戏音效关闭状态到本地存储
				uni.setStorageSync('gameSoundEnabled', false)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			handleSuccess(data) {
				console.log('手机号修改成功:', data.phone)
				// 这里可以更新页面上的手机号显示
			},
			onprops(index) {
				if (index == 4) {
					this.showModal = true
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/idcurd/idcurd"
					})
				} else if (index == 5) {
					this.show = true
				} else if (index == 3) {
					uni.navigateTo({
						url: "/pages/steam/steam"
					})
				} else if (index == 6) {
					window.open("https://www.baidu.com/")
					// 实际项目中这里会打开客服窗口
				}
			},
			// 上传头像接口
			async onupdaty(datas) {
				let res = await getImageBase64({
					data: datas
				})
				// console.log(res)
				this.upword(res.data.url)
			},
			// 更新头像接口
			async upword(paths) {
				let res = await getSet_avatar({
					path: paths
				})
				// console.log(res,"上传")
				this.onusers()
			},
			// 新增方法：选择图片（更换头像）
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [type],
					success: (res) => {
						console.log(res.tempFilePaths[0], "res头像")
						const tempFilePaths = res.tempFilePaths;
						this.userAvatar = tempFilePaths[0];
						this.showAvatarDialog = false;
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								// console.log(base64,"成功后")
								this.onupdaty(base64)
							})
							.catch(error => {
								console.error(error, "失败后")
							})
					}
				});
			},
			// 新增方法：复制邀请码
			copyInviteCode() {
				uni.setClipboardData({
					data: this.inviteCode,
					success: () => {
						uni.showToast({
							title: '邀请码已复制',
							icon: 'none'
						});
					}
				});
			},
			// 新增方法：确认编辑用户名
			confirmEditName() {
				if (this.newUsername.trim()) {
					this.username = this.newUsername.trim();
					this.showEditNameDialog = false;
					console.log(this.username, "名字")
					this.getSet_names(this.username)

					// 这里可以添加保存用户名到服务器的逻辑
				} else {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
				}
			}
		},
		onLoad() {
			// 初始化新用户名
			this.newUsername = this.username;
		}
	}
</script>

<style lang="scss">
	.my_box {
		width: 100vw;
		height: calc(100vh - 90rpx);
		background: url("https://img.jingkakeji.com/img/static/mysd.png");
		margin: 0;
		padding: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;
	}

	.my_tops {
		width: 95%;
		height: 344rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url("https://img.jingkakeji.com/img/static/new_my/my_box.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
	}

	/* 新增用户信息样式 */
	.user-info-container {
		display: flex;
		align-items: center;
		width: 90%;

	}

	.avatar-container {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		border: 4rpx solid rgba(255, 255, 255, 0.5);
	}

	.zz {
		width: 200rpx;
		height: 200rpx;
		background-image: url("https://img.jingkakeji.com/img/static/new_my/avatar_box.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: calc(50% - 100rpx);
		left: -10rpx;
		z-index: 999;
		pointer-events: none;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.avatar-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.avatar-container:hover .avatar-mask {
		opacity: 1;
	}

	.edit-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.user-details {
		margin-left: 40rpx;
		flex: 1;
	}

	.username-container {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.username {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.edit-username-icon {
		width: 30rpx;
		height: 30rpx;
		margin-left: 15rpx;
	}

	.invite-code {
		display: flex;
		align-items: center;
	}

	.invite-label {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.invite-value {
		font-size: 28rpx;
		color: #ffffff;
		margin: 0 10rpx;
	}

	.value-two {
		color: #7463DB;
	}

	.copy-icon {
		width: 28rpx;
		height: 28rpx;
	}

	/* 弹窗样式 */
	.avatar-dialog,
	.edit-name-dialog {
		width: 500rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 40rpx 20rpx;
	}

	.dialog-title {
		text-align: center;
		font-size: 34rpx;
		color: #333333;
		margin-bottom: 40rpx;
		font-weight: bold;
	}

	.dialog-btns {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.dialog-btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		border-radius: 40rpx;
		background-color: #7463DB;
		color: #ffffff;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #666666;
	}

	.input-container {
		margin-bottom: 40rpx;
		padding: 0 20rpx;
	}

	.input-container input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #eeeeee;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
	}

	/* 原有样式保持不变 */
	.my_center {
		width: 95%;
		min-height: 170rpx;
		margin-top: 20rpx;
	}

	.my_list {
		width: 95%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.my_list>i {
		width: 58rpx;
	}

	.tabs_list {
		width: 150rpx;
		height: 170rpx;
		background: url("https://img.jingkakeji.com/img/static/xiaofangk.png");
		background-repeat: no-repeat;
		background-size: contain;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		color: #ffffff;
		font-size: 24rpx;
		margin-top: 25rpx;
	}

	.my_backs {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 20rpx;
		color: #D1D3F5;
		background: url("https://img.jingkakeji.com/img/static/mybacks.png");
		background-repeat: no-repeat;
		background-size: contain;
		margin-top: 200rpx;
	}

	.my_yonghus {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 20rpx;
		color: #D1D3F5;
	}

	.props {
		width: 600rpx;
		height: 700rpx;
		// background-color: aqua;
		position: relative;
		display: flex;
		justify-content: center;
		/* 水平居中 */

	}

	.props_top {
		width: 300rpx;
		height: 90rpx;
		position: absolute;
		top: 0;
		left: 150rpx;
		background: url("https://img.jingkakeji.com/img/static/byd.png");
		background-repeat: no-repeat;
		background-size: contain;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.props_back {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		right: 33rpx;
		top: 33rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.props_list {
		width: 90%;
		height: 550rpx;
		margin-top: 40rpx;
		background: url("https://img.jingkakeji.com/img/static/neirongs.png");
		background-repeat: no-repeat;
		background-size: contain;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.lists {
		width: 90%;
		height: 65rpx;
		display: flex;
		margin-top: 50rpx;
	}

	.lists:nth-child(1) {
		margin-top: 100rpx;
	}

	.lists_left {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.lists_right {
		width: 50%;
		height: 100%;
		display: flex;

		align-items: center;
		background: url("https://img.jingkakeji.com/img/static/listnm.png");
		background-repeat: no-repeat;
		background-size: contain;
	}

	.on {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */

	}

	.off {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.props_btm {
		width: 90%;
		height: 80rpx;
		margin-top: 160rpx;
		background-color: #7463DB;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		color: #ffffff;
	}
</style>